<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-11-02 11:52:17
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-01-08 12:26:03
 * @FilePath: \mould\src\components\public\nav.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- 二次封装el-selct 支持既能选择又能输入 -->
    <el-select v-model="inputValue" filterable :placeholder="placeholder" @focus="handFocus" ref="inputSelect"
        @change="handChange" @visible-change="handleVisibleChange">
        <el-option :label="item.label" :value="item.value" v-for="(item, index) in optionOpt"
            :key="`${item.label}_${index}`"></el-option>
    </el-select>

</template>
<script>
export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        // slect下拉选项
        optionOpt: {
            type: Array,
            default: () => []
        },
        placeholder: {
            type: String,
            default: ''
        },
        value: {
            type: String || undefined,
            default: ''
        },




        // placeholder: {
        //     type: String,
        //     default: ''
        // },
        // value: {
        //     type: String | undefined,
        //     default: ''
        // }
    },
    // props: {
    //     // slect下拉选项
    //     optionOpt: {
    //         type: Array,
    //         default: []
    //     },
    //     placeholder: {
    //         type: String,
    //         default: ''
    //     },
    //     value: {
    //         type: String | undefined,
    //         default: ''
    //     }
    // },
    data() {
        return {
            inputValue: '',
            isSelectChange: false // 判断是选择下拉选项 默认未选择
        }
    },
    methods: {
        handChange(data) {
            this.inputValue = data;
            this.isSelectChange = true;

        },
        handleVisibleChange(val) {
            if (!val) {
                let input = this.$refs.inputSelect.$children[0].$refs.input;
                input.blur();
            }
        },
        handFocus() {
            let input = this.$refs.inputSelect.$children[0].$refs.input;
            input.blur = () => {

                if (!this.isSelectChange) {
                    this.inputValue = input.value;
                }
                this.isSelectChange = false
            }
        },
    },
    watch: {
        'value': {
            handler(val) {
                this.inputValue = val;
            }
        },
        'inputValue': {
            handler(val) {
                this.$emit('change', val)
            }
        }
    }
}
</script>
